<template>
	<!-- 导航 -->
	<view class="flex-center h-80rpx" style="z-index: 101;">
		<view :class="{ 'xuanZhong': status === 1, 'weiXuanzhong': status === 2 }" @click="transmitstatus(1)">
			{{text.text1}}
		</view>
		<view :class="{ 'xuanZhong': status === 2, 'weiXuanzhong': status === 1 }" @click="transmitstatus(2)">
			{{text.text2}}
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, toRefs } from 'vue'
	const props = defineProps({
		text: Object
	})
	const text = toRefs(props).text
	const status = ref<number>(1)
	const emit = defineEmits(["statusdetails"])
	function transmitstatus(v) {
		status.value = v
		emit("statusdetails", status.value)
	}
</script>

<style scoped>
	.xuanZhong {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2F7BFF;
	}

	.weiXuanzhong {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E1F22;
	}
</style>